<template>
    <InfoCard style="border: 1px dashed rgb(180, 180, 180);" v-if="payInfo.item?.qrcode">
        <template #header v-if="payInfo.item.qrcode?.characters">
            <div class="text-center" v-html="payInfo.item.qrcode?.characters"></div>
        </template>
        <template #content>
            <div style="text-align: center;" v-if="payInfo.item?.qrcode">
                <img width="200px" :src="payInfo.payMessage.agentImgSrc" :alt="payInfo.payMessage.agentImgTitle">
                <div v-html="payInfo.item.qrcode?.charactersTxt"></div>
            </div>
        </template>
    </InfoCard>
</template>

<script setup lang="ts">
import InfoCard from './InfoCard.vue';
import { Icon, Button, Popup, Loading, showNotify, Field, CellGroup, Form as VanForm } from "vant";
defineProps({
    payInfo: {
        type: Object,
        default: () => ({})
    }
});
</script>